<style>
  #container {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
  .confirm {
    position: absolute;
    bottom: 30px;
    right: 4%;
    z-index: 99;
    height: 50px;
    width: 50px;
    line-height: 50px;
    font-size: 15px;
    text-align: center;
    background-color: white;
    background: #1ABC9C;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 50%;
  }

  .search {
    position: absolute;
    width: 400px;
    top: 0;
    left: 50%;
    padding: 5px;
    margin-left: -200px;
  }
</style>
<div class="layuimini-container">
  <form id="app-form" class="layui-form layuimini-form">

    <div class="layui-form-item">
      <label class="layui-form-label">适用门店名称</label>
      <div class="layui-input-block">
        <input type="text" name="store_name" class="layui-input" lay-verify="required" placeholder="请输入门店名称" value="">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">门店电话</label>
      <div class="layui-input-block">
        <input type="text" name="store_mobile" class="layui-input" lay-verify="required" placeholder="请输入门店电话" value="">
      </div>
    </div>

    <div class="layui-form-item layui-form-text">
      <label class="layui-form-label">选择地图</label>
      <div class="layui-input-block">
        <div class="search">
          <div class="input-group">
            <input type="text" id="place" name="q" class="form-control" placeholder="输入地点"/>
            <span class="input-group-btn">
            <button type="submit" name="search" id="search-btn" class="btn btn-success">
                <i class="fa fa-search"></i>
            </button>
        </span>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">门店地址</label>
      <div class="layui-input-block">
        <input type="text" name="store_date" class="layui-input" lay-verify="required" placeholder="请输入门店地址" value="">
      </div>
    </div>
    <div class="hr-line"></div>
    <div class="layui-form-item text-center">
      <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>
      <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
    </div>

  </form>
</div>
<div id="container"></div>
<script charset="utf-8" src="//map.qq.com/api/js?v=2.exp&libraries=place&key={$config.tencentkey|default=''}"></script>
<script type="text/javascript">
  $(function () {
    var map, marker, geocoder, infoWin, searchService, address = null;
    var init = function () {
      var center = new qq.maps.LatLng(29.54023,106.471799);
      map = new qq.maps.Map(document.getElementById('container'), {
        center: center,
        zoom: 10
      });
      //初始化marker
      initmarker(center);

      //实例化信息窗口
      infoWin = new qq.maps.InfoWindow({
        map: map
      });
      geocoder = new qq.maps.Geocoder({
        complete: function (result) {
          infoWin.open();
          address = result.detail.addressComponents.province +
                  result.detail.addressComponents.city +
                  result.detail.addressComponents.district;
          if (result.detail.addressComponents.streetNumber == '') {
            address += result.detail.addressComponents.street;
          } else {
            address += result.detail.addressComponents.streetNumber;
          }
          infoWin.setContent(address);
          infoWin.setPosition(result.detail.location);
        }
      });
      //显示当前marker的位置信息窗口
      geocoder.getAddress(center);

      var latlngBounds = new qq.maps.LatLngBounds();
      //查询poi类信息
      searchService = new qq.maps.SearchService({
        complete: function (results) {
          var pois = results.detail.pois;
          for (var i = 0, l = pois.length; i < l; i++) {
            var poi = pois[i];
            latlngBounds.extend(poi.latLng);
            initmarker(poi.latLng);
            //显示当前marker的位置信息窗口
            geocoder.getAddress(poi.latLng);
          }
          map.fitBounds(latlngBounds);
        }
      });
      //实例化自动完成
      var ap = new qq.maps.place.Autocomplete(document.getElementById('place'));
      //添加监听事件
      qq.maps.event.addListener(ap, "confirm", function (res) {
        searchKeyword();
      });
      qq.maps.event.addListener(
              map,
              'click',
              function (event) {
                try {
                  infoWin.setContent('<div style="text-align:center;white-space:nowrap;margin:10px;">加载中</div>');
                  var latLng = event.latLng,
                          lat = latLng.getLat().toFixed(5),
                          lng = latLng.getLng().toFixed(5);
                  var location = new qq.maps.LatLng(lat, lng);
                  //调用获取位置方法
                  geocoder.getAddress(location);
                  infoWin.setPosition(location);
                  marker.setPosition(location);
                } catch (e) {
                  console.log(e);
                }
              }
      );
    };

    //实例化marker和监听拖拽结束事件
    var initmarker = function (latLng) {
      marker = new qq.maps.Marker({
        map: map,
        position: latLng,
        draggable: true,
        title: '拖动图标选择位置'
      });
      //监听拖拽结束
      qq.maps.event.addListener(marker, 'dragend', function (event) {
        var latLng = event.latLng,
                lat = latLng.getLat().toFixed(5),
                lng = latLng.getLng().toFixed(5);
        var location = new qq.maps.LatLng(lat, lng);
        //调用获取位置方法
        geocoder.getAddress(location);
      });
    };
    var close = function (data) {
      var index = parent.Layer.getFrameIndex(window.name);
      var callback = parent.$("#layui-layer" + index).data("callback");
      //再执行关闭
      parent.Layer.close(index);
      //再调用回传函数
      if (typeof callback === 'function') {
        callback.call(undefined, data);
      }
    };

    //执行搜索方法
    var searchKeyword = function () {
      searchService.clear();//先清除
      marker.setMap(null);
      infoWin.close();
      var keyword = $("#place").val();
      searchService.setLocation("重庆");//设置默认检索范围（默认为全国），类型可以是坐标或指定的城市名称。
      searchService.setPageIndex(0);//设置检索的特定页数。
      searchService.setPageCapacity(1);//设置每页返回的结果数量。
      searchService.search(keyword);//开始查询
    };

    //点击确定后执行回调赋值
    $(document).on('click', '.confirm', function () {
      var as = marker.getPosition();
      var x = as.getLat().toFixed(5);
      var y = as.getLng().toFixed(5);
      var zoom = map.getZoom();
      var data = {lat: x, lng: y, zoom: zoom, address: address};
      close(data);
    });

    //点击搜索按钮
    $(document).on('click', '#search-btn', function () {
      if ($("#place").val() == '')
        return;
      searchKeyword();
    });

    init();
  });
</script>